<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>会议室预约</title>
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/form.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="css/meetcomm.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <style>
        .tag-label {
            border-radius: 4px;
            border: solid 1px #0079fe;
            color: #0079fe;
            padding: 0px 5px;
            margin-right: 10px;
            display: inline-block;
            height: 24px;
            line-height: 24px;
            margin-bottom: 5px;
        }

        .view-margin {
            margin: 0px 20px 0px 20px;
        }

        .border-bottom0 {
            border-bottom: 0;
        }

        .project-popup-Tag {
            background-color: #f0f0f0;
            color: #999;
            padding: 3px 15px;
            border-radius: 4px;
            margin-bottom: 10px;
            margin-right: 10px;
            display: inline-block;
        }

        .project-popup-Tag-active {
            background-color: #0079fe;
            color: #fff;
        }

        .wp-label-tag .van-tag {
            border-radius: 4px;
            padding: 6px;
            display: inline-block;
            margin-bottom: 10px;
        }

        .project-popup-table {
            color: #757575;
            font-weight: bold;
        }

        .popup-bottombtn {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            background: #fff;
            height: 70px;
            padding: 10px 15px;
        }

        .aui_bottombtn {
            border: solid 1px #0079fe;
        }

        .aui_bottombtn_left {
            background: #fff;
            color: #0079fe;
        }

        /*预约时间*/
        .div-header {
            width: 100%;
            position: fixed;
            height: 5rem;
            overflow: hidden;
            overflow-x: auto;
            white-space: nowrap;
            /* 确保内容不会换行 */
            background-color: #fff;
            left: 0;
            padding: 10px 10px 0 10px;
            box-shadow: 0px 1px 5px 0px rgba(60, 128, 209, 0.12);
            z-index: 1;
            margin-top: -10px;
        }

        .div-header-time {
            background-color: #f0f0f0;
            width: 90px;
            height: 70px;
            border-radius: 6px;
            text-align: center;
            display: inline-block;
            /* 让内容作为行内块显示 */
            margin-right: 15px;
        }

        .time-title {
            color: #999;
            font-size: 0.8rem;
        }

        .text-blod {
            font-weight: bold;
        }

        .div-header-time-active {
            background-color: #0079fe;
            color: #fff;
        }

        .div-header-time-active .time-title {
            color: #fff;
        }

        .div-time-content {
            margin-top: 4.5rem;
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
            padding-top: 10px;
            padding-bottom: 30px;
        }

        .div-time-tip {
            background: #D4e6fa;
            color: #0079fe;
            border-radius: 6px;
            padding: 5px 10px;
            text-align: center;
            width: 100%;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .div-time-bg {
            width: 100%;
            height: auto;
            min-height: 65px;
            margin-right: 0;
        }

        .div-time-bg_white {
            background-color: #f7f8fa;
        }

        .div-time-bg_blue {
            background-color: #0079fe;
            color: #fff;
        }

        .div-time-bg_grey {
            background-color: #ddd;
        }

        .div-time-bg_blue .new-tag-span_time .text-grey {
            color: #fff;
        }

        .new-tag-span {
            display: flex;
            align-items: center;
            margin-right: 10px;
        }

        .new-tag-span_time {
            margin-right: 0;
            justify-content: center;
        }

        .new-tag-span .van-tag {
            width: 12px;
            line-height: unset;
            height: 12px;
            margin-right: 5px;
            border-radius: 50%;
        }

        .display-center {
            display: flex;
            align-items: center;
        }

        .text-right {
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="app" class="uni-bottom80" v-cloak>
        <div class="edit aui-padded-t-0">
            <div class="">
                <div class="uni-panel-hs border-r mbpb">
                    <div class="aui-padded-t-10">
                        <div class="uni-flex uni-row view-margin uni-text-color-grey">
                            <div class="text left-view uni-leftText bfbfbf">会议室名称</div>
                            <div class="text right-view text-right" style="padding:6px 0px">
                                {{meetform.RoomName}}
                            </div>
                        </div>
                        <div class="uni-flex uni-row view-margin uni-text-color-grey">
                            <div class="text left-view uni-leftText bfbfbf">位置</div>
                            <div class="text right-view text-right" style="padding:6px 0px">
                                {{meetform.RoomAddr}}
                            </div>
                        </div>
                        <div class="uni-flex uni-row view-margin uni-text-color-grey">
                            <div class="text left-view uni-leftText bfbfbf">容纳人数</div>
                            <div class="text right-view text-right" style="padding:6px 0px">
                                {{meetform.PeopleNum}}
                            </div>
                        </div>
                        <div class="uni-flex uni-row view-margin uni-text-color-grey">
                            <div class="text left-view uni-leftText bfbfbf">开放时段</div>
                            <div class="text right-view text-right" style="padding:6px 0px">
                                {{meetform.OpenStarTime}}-{{meetform.OpenEndTime}}
                            </div>
                        </div>
                        <div class="uni-flex uni-row view-margin uni-text-color-grey">
                            <div class="text left-view uni-leftText bfbfbf">维护电话</div>
                            <div class="text right-view text-right" style="padding:6px 0px">
                                {{meetform.Phone}}
                            </div>
                        </div>
                        <div class="uni-flex uni-row view-margin uni-text-color-grey">
                            <div class="text left-view uni-leftText bfbfbf">会议室图片</div>
                            <div class="text right-view" style="padding:6px 0px">
                            </div>
                        </div>
                        <div v-if="ImgList.length>0" class="aui-row task_con_image aui-margin-b-5 view-margin">
                            <!-- <div v-for="item in ImgList" class="aui-col-xs-3 aui-margin-r-5 aui-margin-b-5">
                                <img v-on:click="img_browser(ImgList,item.url)" v-bind:src="item.url" class="border-r"
                                    style="height: 4.2rem;" />
                            </div> -->
                            <van-row gutter="5">
                                <van-col span="6" v-for="item in ImgList" class="aui-margin-b-5">
                                    <img v-on:click="img_browser(ImgList,item.url)" v-bind:src="item.url"
                                        class="border-r" style="height: 4.2rem;" />
                                </van-col>
                            </van-row>
                            <div class="cl"></div>
                        </div>
                        <div class="uni-flex uni-row view-margin uni-text-color-grey">
                            <div class="text left-view uni-leftText bfbfbf">固定设备</div>
                            <div class="text right-view" style="padding:6px 0px">
                            </div>
                        </div>
                        <div class="uni-flex uni-row view-margin uni-text-color-grey">
                            <div class="">
                                <label class="tag-label " v-for="itemTag in MeetingItemList">{{itemTag.Name}}</label>
                            </div>
                        </div>
                        <div class="uni-flex uni-row view-margin uni-text-color-grey">
                            <div class="text left-view uni-leftText bfbfbf">备注信息</div>
                            <div class="text right-view" style="padding:6px 0px"></div>
                        </div>
                        <div class="uni-flex uni-row view-margin uni-text-color-grey">
                            {{meetform.Mark}}
                        </div>
                    </div>
                </div>
                <div class="uni-panel-hs border-r mbpb">
                    <div class="aui-padded-t-10">
                        <div class="uni-flex uni-row yx-line uni-text-color-grey">
                            <div class="text left-view uni-leftText col-star">会议主题</div>
                            <div class="text right-view">
                                <input v-model="form.MeetingTitle" class="uni-input pson-contain" placeholder="请填写" />
                            </div>
                        </div>
                        <div class="uni-flex uni-row yx-line uni-text-color-grey">
                            <div class="text left-view uni-leftText col-star">预约时段</div>
                            <div class="text right-view">
                                <label v-if="form.StartTime" v-on:click="doOpenChooseTime()" class="uni-input"
                                    style="display: block;">
                                    <span v-if="form.StartTime!=''&&showSelectTime!=''"
                                        class="aui-margin-r-5">{{showSelectTime}}</span>
                                    {{form.StartTime}}- {{form.EndTime}}<i
                                        class="icon iconfont icon-xiangyoujiantou"></i></label>
                                <label v-else v-on:click="doOpenChooseTime()" class="uni-input"
                                    style="display: block; color: #bfbfbf !important;">请选择 <i
                                        class="icon iconfont icon-xiangyoujiantou"></i></label>
                            </div>
                        </div>
                        <div class="uni-flex uni-row yx-line uni-text-color-grey">
                            <div class="text left-view uni-leftText col-star">申请人电话</div>
                            <div class="text right-view">
                                <input v-model="form.MeetingApplyPhone" type="number" class="uni-input pson-contain"
                                    placeholder="请填写" />
                            </div>
                        </div>
                        <div class="uni-flex uni-row yx-line uni-text-color-grey">
                            <div class="text left-view uni-leftText">参会人数</div>
                            <div class="text right-view">
                                <!--<input v-model="form.MeetingPeopleNum" type="number" min="1"  :max="meetform.PeopleNum" class="uni-input pson-contain" placeholder="请填写" />-->
                                <van-stepper v-model="form.MeetingPeopleNum" class="uni-input pson-contain"
                                    :max="meetform.PeopleNum" placeholder="请填写" integer
                                    style="display: flex;width: 100px; float: right;height: 2.2rem;align-items: center;" />
                            </div>
                        </div>
                        <div class="uni-flex uni-row yx-line uni-text-color-grey border-bottom0 aui-margin-b-0">
                            <div class="text left-view uni-leftText">会议描述</div>
                            <div class="text right-view">
                                <label style="display:block;"
                                    class="uni-input pson-contain">({{form.Remark.length}}/200)</label>
                            </div>
                        </div>
                        <div class="uni-flex uni-row yx-line uni-text-color-grey">
                            <textarea placeholder="请填写会议描述信息" maxlength="200" v-model="form.Descriotion"></textarea>
                        </div>
                        <div class="uni-flex uni-row yx-line uni-text-color-grey border-bottom0 aui-margin-b-0">
                            <div class="text left-view uni-leftText">备注信息</div>
                            <div class="text right-view">
                                <label style="display:block;"
                                    class="uni-input pson-contain">({{form.Remark.length}}/200)</label>
                            </div>
                        </div>
                        <div class="uni-flex uni-row yx-line uni-text-color-grey border-bottom0">
                            <textarea placeholder="请填写备注信息" maxlength="200" v-model="form.Remark"></textarea>
                        </div>
                    </div>
                </div>

                <div class="uni-panel-hs border-r mbpb">
                    <div class="public-title border-bottomLine pd82">
                        <label class="uni-textTitle uni-childTitle">会议服务</label>
                        <label class="fr"><i class="icon iconfont icon-addApp text-blue text-blod"
                                @click="doOpenChooseService"></i> </label>
                    </div>
                    <div class="pd82">
                        <div v-if="item.Number>0" v-for="(item,index) in ServiceList" class="border-bottomLine">
                            <van-row class="aui-margin-b-10 display-center">
                                <van-col span="8">{{item.ServicesName}}</van-col>
                                <van-col span="8">{{item.UnitPrice?item.UnitPrice.toFixed(2):0.00}}/{{item.Unit}}
                                </van-col>
                                <van-col span="8" style="display:flex;">
                                    <van-stepper @change="onCountTotalPrice" min="1" v-model="item.Number" integer
                                        style="display: flex; width: 80px;height: 2.2rem;align-items: center; ">
                                    </van-stepper>
                                    <i @click="onClickServiceDel(item)"
                                        class="icon iconfont icon-shanchu text-blue aui-margin-l-10"
                                        style="margin-top: 10px;"></i>
                                </van-col>
                            </van-row>
                        </div>
                        <div v-if="TotalPrice>0" class="aui-margin-t-10" style="text-align: right;">
                            合计金额：<label class="text-red">¥{{TotalPrice}}</label>
                        </div>
                    </div>
                </div>

                <div class="uni-panel-hs border-r mbpb">
                    <div class="public-title border-bottomLine pd82">
                        <label class="uni-textTitle uni-childTitle">临时物品</label>
                        <label class="fr"><i class="icon iconfont icon-addApp text-blue text-blod"
                                @click="doOpenChooseItem"></i> </label>
                    </div>
                    <div class="pd82">
                        <label v-if="item.IsSelected" v-for="(item,index) in ItemList"
                            class="wp-label-tag aui-margin-b-10 aui-margin-r-15">
                            <van-tag color="#289FFF" closeable type="info" @close="doSelectCloseItem(item)">
                                {{item.Name}}
                            </van-tag>
                        </label>

                    </div>
                </div>

            </div>
        </div>

        <div v-on:click="do_save()" class="aui_bottom">
            <div class="aui_bottombtn">确认预约</div>
        </div>


        <!--预约时段选择-->
        <van-popup v-model:show="IsShowTime" closeable round position="bottom"
            :style="{ height: '70%',overflow:'hidden'}" teleport="body">
            <div class="project-popup-title">预约时段选择 <i class="aui-iconfont aui-icon-close project-rightclose"
                    v-on:click="doOpenChooseTime()"></i></div>
            <div class="project-popup-top aui-padded-l-15 aui-padded-r-15 uni-bottom80">
                <div class="div-header">
                    <div class="div-header-time" v-on:click="onDayChoose(item)" v-for="item in dayList"
                        v-bind:class="{'div-header-time-active':dayModel.ID==item.ID}">
                        <div class="aui-padded-t-5">
                            <div class="time-title">{{item.Title}}</div>
                            <div class="text-blod aui-font-size-14 ">{{item.MomentDate}}</div>
                        </div>
                    </div>
                </div>

                <div class="div-time-content uni-bottom80">
                    <div v-if="TimeList.length>0" class="div-time-tip">点击确认开始时间，再次点击确认结束时间。</div>
                    <van-row gutter="10">
                        <van-col span="6" v-for="itemt in TimeList">
                            <div class="div-header-time div-time-bg aui-margin-b-10" v-on:click="onDayChooseTime(itemt)"
                                v-bind:class="{'div-time-bg_white':itemt.status==-1,'div-time-bg_blue':itemt.IsOpen,'div-time-bg_grey':itemt.status==-2,}">
                                <div class="aui-padded-t-5">
                                    <div class="text-blod">{{itemt.timetitle}}</div>
                                    <div class=" ">
                                        <label v-if="itemt.status==-2"><span
                                                class="text-grey  aui-font-size-12">已过期</span></label>
                                        <label v-if="itemt.status==-1" class="new-tag-span new-tag-span_time">
                                            <van-tag :plain="false" color="#ecf2fe"></van-tag><span
                                                class="text-grey aui-font-size-12">空闲</span>
                                        </label>
                                        <label v-if="itemt.status==0" class="new-tag-span new-tag-span_time">
                                            <van-tag :plain="false" color="#ace6b1"></van-tag><span
                                                class="text-grey aui-font-size-12">已预约</span>
                                        </label>
                                        <label v-if="itemt.status==1" class="new-tag-span new-tag-span_time">
                                            <van-tag :plain="false" color="#fb8753"></van-tag><span
                                                class="text-grey aui-font-size-12">会议中</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </van-col>
                    </van-row>

                </div>

            </div>
            <div class="popup-bottombtn"
                style="display: flex; justify-content: space-between; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); ">
                <div v-on:click="doOpenChooseTimeCancel()" class="aui_bottombtn aui_bottombtn_left" style="width:48%;">
                    清空</div>
                <div v-on:click="doOpenChooseTime()" class="aui_bottombtn" style="width:48%;">
                    {{CalculateTimeDesc?CalculateTimeDesc:'确认'}}</div>
            </div>
        </van-popup>

        <!--物品信息选择-->
        <van-popup v-model:show="IsShowItem" closeable round :style="{ height: '50%',width:'80%',overflow:'hidden'}"
            teleport="body">
            <div class="project-popup-title">物品信息选择 <i class="aui-iconfont aui-icon-close project-rightclose"
                    v-on:click="doOpenChooseItem()"></i></div>
            <div class="project-popup-top aui-padded-l-15 aui-padded-r-15 uni-bottom80">
                <label class="project-popup-Tag " v-for="(item,index) in ItemList" @click="onChooseItem(item)"
                    v-bind:class="{'project-popup-Tag-active':item.IsSelected}">{{item.Name}}</label>
            </div>
            <div class="popup-bottombtn" style="display: flex; justify-content: space-between; ">
                <div v-on:click="doOpenChooseItem()" class="aui_bottombtn aui_bottombtn_left" style="width:48%;">取消
                </div>
                <div v-on:click="doOpenChooseItem()" class="aui_bottombtn" style="width:48%;">确认</div>
            </div>
        </van-popup>

        <!--会议服务选择-->
        <van-popup v-model:show="IsShowService" closeable round position="bottom"
            :style="{ height: '70%',overflow:'hidden'}" teleport="body">
            <div class="project-popup-title">会议服务选择 <i class="aui-iconfont aui-icon-close project-rightclose"
                    v-on:click="doOpenChooseService()"></i></div>
            <div class="project-popup-top aui-padded-l-15 aui-padded-r-15 uni-bottom80 ">
                <van-row class="project-popup-table aui-margin-b-10">
                    <van-col span="8">服务名称</van-col>
                    <van-col span="8">单价/单位</van-col>
                    <van-col span="8">已选数量</van-col>
                </van-row>
                <div @click="onChooseService(item)" v-for="(item,index) in ServiceList"  class="border-bottomLine">
                    <van-row class="aui-margin-b-10 display-center">
                        <van-col span="8">{{item.ServicesName}}</van-col>
                        <van-col span="8">{{item.UnitPrice?item.UnitPrice.toFixed(2):0.00}}/{{item.Unit}}</van-col>
                        <van-col span="8">
                            <van-stepper @change="onCountTotalPrice" min="0" v-model="item.Number" integer
                                style="display: flex; width: 100px;height: 2.2rem;align-items: center; " />
                        </van-col>
                    </van-row>
                </div>

                <div class="popup-bottombtn">
                    <div v-on:click="doOpenChooseService()" class="aui_bottombtn">确认</div>
                </div>
            </div>
        </van-popup>

    </div>
</body>
<script type="text/javascript " src="../script/api.js"></script>
<script type="text/javascript " src="../script/vue.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-dialog.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/aui-popup.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript " src="../script/moment/moment.js"></script>
<script type="text/javascript " src="js/visitormeetreserveadd.js"></script>

</html>